<template>
      <div>
        <CustomForm :customFields="registercounselorFields" :handleSubmit="submit" />
      </div>
  </template>
  
  <script setup lang="ts">
  import CustomForm from './basicForm.vue';
  import { GoPageName, Icons } from "@/enums/index.ts"
  import { ref } from 'vue';
  
  // 提交注册的处理函数
  const submit = async (_formData: any) => {
  return Promise.resolve();
};
  
  // 注册表单配置
  const registercounselorFields = ref({
    title: '咨询师注册',
    btnTitle: "注册",
    type: GoPageName.REGISTERcounselor,
    inputData: [
      {
        lable: "username",
        value: "",
        inputPlaceholder: '请输入用户名',
        type: "text",
        icon: Icons.USER
      },
      {
        lable: "gender  ",
        value: "",
        inputPlaceholder: '请输入性别',
        type: "text",
        icon: Icons.VERIFY
      },
      {
        lable: "phoneNomber",
        value: "",
        inputPlaceholder: '请输入手机号',
        type: "tel",
        icon: Icons.IPHONE
      },
      {
        lable: "inputPassword",
        value: "",
        inputPlaceholder: '请输入密码',
        type: "password",
        icon: Icons.LOCK
      },
      {
        lable: "email",
        value: "",
        inputPlaceholder: '请输入邮箱',
        type: "email",
        icon: Icons.VERIFY
      },
      {
        lable: "qualification",
        value: "",
        inputPlaceholder: '请输入心理咨询师资格证号',
        type: "text",
        icon: Icons.VERIFY
      }
    ],
    rules: [
      [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      [{ required: true, message: '请输入性别', trigger: 'blur' }],
      [{ required: true, message: '请检查手机号，并重新输入', trigger: 'blur' }],
      [{ required: true, message: '请输入密码', trigger: 'blur' }],
      [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
      [{ required: true, message: '请输入资格证号', trigger: 'blur' }],

    ],
  });
  </script>
  
  <style scoped>
  .register-container {
    width: 100%;
  }
  
  .register-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }
  
  .tab-item {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    position: relative;
    transition: all 0.3s;
  }
  
  .tab-item.active {
    color: #409EFF;
  }
  
  .tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #409EFF;
  }
  
  .tab-item:hover {
    color: #409EFF;
  }
  </style>
  